<template>
  <div class="container">
    <div style="background-color: #fff">
      <div v-for="(item, index) in modelList" class="single-model-container" :key="index" @click="pushRouter(item)">
        <div class="single-model">
          <div class="model-img-container">
            <!-- src="../../images/renwuhuaxiang.png" -->
            <!-- <img class="model-img" :src="item.img" /> -->
            <div class="model-img"><img :src="require('@/assets/ico/icon' + item.id + '.png')" alt="" /></div>
          </div>
          <div class="model-detail">
            <div class="model-name-container" :title="item.name">{{ item.name }}</div>
            <div class="model-remark" :title="item.description">{{ item.description }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/wxSmuggle/caseEvent.js'
import modelRouter from './../modelRouter.js'
export default {
  props: ['taskId', 'incidentId', 'isViewModel', 'isOperation', 'approvalId', 'infoObject'],
  data() {
    return {
      modelList: []
    }
  },
  mounted() {
    this.getModalList()
  },
  methods: {
    pushRouter(item) {
      if (this.isViewModel) {
        console.log(item.path)
        // 情报事件模型，跳到明文情报列表，把信息带过去搜索
        if (item.path == undefined) {
          api.incidentModelView({ taskId: this.taskId, modelId: item.id }).then(res => {}) //审计日志用
          this.$router.push({
            path: '/mingwenList',
            query: {
              infoObject: {
                incidentCode: this.infoObject.incidentCode, // 事件编号
                incidentName: this.infoObject.incidentName, //事件名称
                taskName: this.infoObject.taskName, //任务名称
                taskCode: this.infoObject.taskCode, // 任务编号
                modelId: item.id //模型id
              }
            }
          })
        } else {
          // 案事件模型，进入模型
          this.$router.push({
            path: item.path,
            query: {
              taskId: this.taskId, // 任务id
              incidentId: this.incidentId, // 案事件id
              modelId: item.id, //模型id
              approvalId: this.approvalId, //审批id
              isOperation: this.isOperation
            }
          })
        }
        // 关闭弹窗
        this.$emit('ok')
      } else {
        this.$message.warning('无权限查看该模型!')
      }
    },
    getModalList() {
      api
        .queryTaskModel({ taskId: this.taskId })
        .then(res => {
          if (res.success) {
            this.modelList = res.result
            this.modelList.forEach(item1 => {
              modelRouter.forEach(item2 => {
                if (item1.id == item2.id) {
                  item1.path = item2.path
                }
              })
              if (item1.name == '时空碰撞') {
                this.$emit('shikongpengzhaungModel', true)
              }
            })
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    }
  }
}
</script>

<style scoped lang="less">
.single-model-container {
  display: inline-block;
  position: relative;
  width: 24%;
  cursor: pointer;
  margin: 5px 10px 0 0;
  border: 1px solid #e8e8e8;
  padding: 5px;
}
.single-model {
  height: 100px;
  margin: 5px auto;
  width: 230px;
  display: flex;
  align-items: center;
}
.model-img {
  height: 70px;
  width: 70px;
  margin-right: 10px;
  margin-top: 20px;
}
.model-img img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.model-img-container {
  display: inline-block;
  height: 100px;
}
.model-name-container {
  display: inline-block;
  width: 120px;
  font-size: 14px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.model-remark {
  display: inline-block;
  height: 60px;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* width: 145px; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.model-detail {
  display: inline-block;
  width: 125px;
  padding: 5px 10px;
}
</style>
